<template>
  <div class="index-container">

    <!-- 轮播图部分 -->
    <div class="slider">
      <!-- 小程序原生支持的轮播图组件 -->
      <swiper
        class="swiper-container"
        v-if="imgUrls.length > 0"
        indidator-dots="imgUrls.length > 1"
      >
        <block
          v-for="(item, index) in slides"
          :key="index"
        >
          <swiper-item>
            <image
              :src="item.image"
              mode="scaleToFill"
            />
          </swiper-item>
        </block>
      </swiper>
    </div>

    <!-- 九宫格 -->
    <ul class="grid">
      <li
        v-for="(item,index) in 9"
        :key="index"
      >
        <div>
          <img :src="'/static/icons/grid-0'+(index+1)+'.png'">
        </div>
        <p>美食</p>
      </li>
    </ul>

    <!-- 商家推荐 -->

    <div class="recom">
      <a class="navi" href="../idcard/main">
        <img
          src="/static/images/link-03.png"
          alt=""
        >
      </a>
      <a class="navi">
        <button open-type="contact">
          <img
          src="/static/images/link-04.png"
          alt=""
        >
        </button>
      </a>
    </div>

  </div>
</template>

<script>
// 导入初始化样式
import card from "@/components/card";

export default {
    data() {
        return {
            motto: "Hello miniprograme",
            userInfo: {
                nickName: "mpvue",
                avatarUrl: "http://mpvue.com/assets/logo.png"
            },
            // 轮播图
            imgUrls: [
                "http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/newsPicture/05558951-de60-49fb-b674-dd906c8897a6",
                "http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/coursePicture/0fbcfdf7-0040-4692-8f84-78bb21f3395d",
                "http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/management-school-picture/7683b32e-4e44-4b2f-9c03-c21f34320870"
            ],
            slides: []
        };
    },

    components: {
        card
    },

    methods: {
        bindViewTap() {
            const url = "../logs/main";
            if (mpvuePlatform === "wx") {
                // tabbar页面的跳转必须使用switchTab()
                mpvue.switchTab({ url });
            } else {
                // 普通页面的跳转必须使用navigatorTo()
                mpvue.navigateTo({ url });
            }
        },
        gotoCounter() {
            const url = "../counter/main";
            mpvue.navigateTo({ url });
        },
        clickHandle(ev) {
            console.log("clickHandle:", ev);
            // throw {message: 'custom test'}
        }
    },

    created() {
        // 获取小程序实例对象
        //  let app = getApp()
        // 打印小程序全局数据对象
        //  console.log(app.globalData);
        // 请求轮播图数据
        // this.$http.get({ url: "/slides", data: {} }).then(res => {
        //     this.slides = res;
        // });
        this.$http.get({ url: "m=Index&a=getSlides", data: {} }).then(res => {
            if(res.errcode==0){
              this.slides = res.data;
            }
            // console.log(res);
        });
    }
};
</script>

<style  lang="scss">
// 导入公共样式
@import "./static/styles/reset.scss";
page{
  background: $bgColor;
}
.index-container {
    /* 轮播图*/
    .swiper-container image {
        width: 100%;
    }
    /* 九宫格 */
    .grid {
        // list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        > li {
            box-sizing: border-box;
            width: 33.33%;
            text-align: center;
            padding: 20rpx;
            border-right: 1px solid $bgColor;
            border-bottom: 1px solid $bgColor;
            &:nth-of-type(3n) {
                border-right: 0;
            }
            &:nth-of-type(n + 7) {
                border-bottom: 0;
            }
            img {
                width: 80rpx;
                height: 80rpx;
            }
            p {
                font-size: 30rpx;
                color: #666;
            }
        }
    }
    /* 商家推荐 */
    .recom {
        display: flex;
        flex-wrap: wrap;
        padding: 10rpx;
        margin: 10rpx 0;
        .navi {
            display: block;
            flex: 1;
            padding: 10rpx;
            img {
                width: 100%;
                height: 200rpx;
            }
            button{
              padding:0;
              background-color: #fff;
            }
            button::after{
              border:none;
            }
        }
    }
}

.grid,
.recom {
    background: #fff;
}
</style>
